import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { updateProductAction } from '../../store/actionCreator'
// import store from '../../store'
import axios from 'axios'
class ProductDetail extends Component {
  state = {
    productDetail: []
  }
  componentDidMount() {
    axios.get('./data/home.json').then(res => {
      this.setState({
        productDetail: res.data.data.data.newItemList
      })

    })
  }
  render() {
    const productId = Number(this.props.location.search.split('=')[1])
    const productDetail = this.state.productDetail.filter(v => v.id === productId)
    console.log(productDetail[0]);
    return (
      <div>
        ProductDetail
        <hr />
        {
          !productDetail.length ? '' : (
            <div>
              <img src={productDetail[0].scenePicUrl} alt="scenePicUrl" />
              <img src={productDetail[0].showPicUrl}/>
              <img src={productDetail[0].primaryPicUrl} alt="primaryPicUrl" />
              <img src={productDetail[0].listPicUrl} alt="listPicUrl" />
              {productDetail[0].featuredSeries && <img src={productDetail[0].featuredSeries.detailPicUrl} alt="featuredSeries-detailPicUrl" />}
              {productDetail[0].featuredSeries && <img src={productDetail[0].featuredSeries.iconUrl} alt="featuredSeries-iconUrl" />}
              

            </div>
          )
        }
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    productReducer: state.getIn(['productReducer'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateProduct: (detail) => {
      dispatch(updateProductAction(detail))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(ProductDetail))